<template>
	<view class="box">
		<view class="navbar">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar :autoBack="true" :bgColor="bgColor">
				<view slot="center" class="title-with-icon">
					取车码
				</view>
			</u-navbar>
		</view>
		<!-- 内容 -->
		<view>
			<!-- 车俩图片 -->
			<view class="qcm-image">
				<image src="../../../static/image/u671.png"></image>
				<text>获取药匙二维码</text>
			</view>
			<!-- 二维码 -->
			<view class="qcm-ewm">
				<image src="../../../static/image/u671.png"></image>
				<text>车牌号</text>
				<text>车俩名称</text>
				<text class="tt">仅限一次此流程申请用车使用</text>
			</view>
		</view>
		<view class="bt">
			<button>保存到手机</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor:"rgb(255, 255, 255)",
				image:[{
					url:"../../../static/image/u671.png"
				}]
				
			};
		}
	}
</script>

<style lang="scss">
	.box{
		.navbar{
			height: 50px;
			.title-with-icon{
				font-size: 15px;
				font-weight: bold;
			}
		}
		.qcm-image{
			margin-top: 50px;
			display: flex;
			height: 300rpx;
			flex-direction: column;
			    justify-content: space-around;
			    align-items: center;
			image{
				width: 100px;
				height: 100px;
				transform: scale(1.3);
			}	
			text{
				display: block;
				color: gray;
				font-size: 12px;
			}
		}
		.qcm-ewm{
			width: 380px;
			height: 400px;
			display: flex;
			background: linear-gradient(to right, rgb(213, 255, 255), rgb(216, 255, 232));
			border-radius: 20px;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			image{
				width: 234px;
				height: 234px;
				margin: 20px;
			}
			text{
				font-size: 15px;
				color: black;
				font-weight: bold;
				margin: 2px;
			}
			.tt{
				color: gray;
				font-size: 12px;
				margin-top: 2px;
			}	
		}
		.bt{
			button{
				margin-top: 100px;
				background-color: rgb(42, 87, 106);
				width: 298px;
				height: 50px;
				color: aliceblue;
			}
		}
	}
</style>
